<template>
  <div>
    <div class="header-tabs">
      <!-- {{pdfList}} -->
      <van-tabs v-model:active="activeName" @click-tab="onClickTab">
        <van-tab
          v-for="(item, index) in pdfList"
          :title="`发票${index + 1}`"
          :name="item.pdfUrl"
        ></van-tab>
        <!-- <van-tab title="标签 2" name="b"></van-tab>
                <van-tab title="标签 3" name="c"></van-tab> -->
      </van-tabs>
    </div>

    <iframe
      :src="pdfUrl"
      width="100%"
      style="height: 100vh; border: none"
    ></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const pdfUrl = ref("");
const activeName = ref("");
let pdfList = ref([]);
if (pdfList.value) {
  pdfList = [
    {
      id: 1,
      pdfUrl: "https://a.data96.com/pdf_preview/upload/%E4%B8%AD%E6%96%87.pdf",
    },
    {
      id: 2,
      pdfUrl:
        "https://wwwimages2.adobe.com/content/dam/cc/cn/legal/servicetou/Acrobat-Sign-Additional-Terms-of-Use-zh_CN-20231015.pdf",
    },
  ];
}
const onClickTab = (item) => {
  activeName.value = item.name
  pdfUrl.value = item.name
}
onMounted(() => {
  activeName.value = route.query.pdfUrl
  pdfUrl.value = route.query.pdfUrl;
});
</script>
<style lang="scss" scoped></style>
